<template>
  <div>

    <div>
      <el-container>
        <el-header>
          <el-header style="text-align: right; font-size: 12px;background-color: silver">
            <!--        上右下左-->
            <div style="height: 60px;background-color: silver;float: left">
              <span class="mainStyle">个人管理系统</span>
            </div>
            <el-button type="warning" round @click="showChat" style="margin: 15px" icon="el-icon-chat-dot-round"
                       circle></el-button>
            <el-button type="info" @click="centerDialogVisible=true" style="margin: 15px" icon="el-icon-message"
                       circle></el-button>

            <el-dropdown trigger="click">

              <span v-html="loginName" class="spanBox"></span>
              <i class="el-icon-caret-bottom"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item><span @click="dialogVisible=true">修改密码</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!--          <player></player>-->
          </el-header>
        </el-header>
        <el-container>

          <el-aside width="160px" style="text-align: left;">
              <img
                  style="border-radius: 50%;width: 70px;height: 70px;margin:10px 45px 5px 45px;border: 1px solid #eeeeee;"
                  src="../common/img/touxiang.gif">
            <!--        :default-openeds="['1-1']"-->
            <el-menu>
              <el-menu-item index="0">
                <i class="el-icon-house"></i><span @click="goHomePage" class="mutiStyle">后台首页</span>
              </el-menu-item>

              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-user-solid"></i><span class="mutiStyle">会员管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <!--带参数-->
                    <router-link to="/user/level/1">
                      <span class="fontStyle">会员等级</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <router-link to="/user/list">
                      <span class="fontStyle">会员列表</span>
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

            <el-menu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-goods"></i><span class="mutiStyle">商品管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <router-link to="/good/category">
                      <span class="fontStyle">商品分类</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="2-2">
                    <router-link to="/good/list">
                      <span class="fontStyle">商品列表</span>
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

            <el-menu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-setting"></i><span class="mutiStyle">系统管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">
                    <router-link to="/system/noticeList">
                      <span class="fontStyle">公告管理</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="3-2">
                    <router-link to="/system/loginLog">
                      <span class="fontStyle">登录日志</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="3-3">
                    <router-link to="/PassValidation">
                      <span class="fontStyle">倒计时</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="3-4">
                    <router-link to="/system/set">
                      <span class="fontStyle">系统设置</span>
                    </router-link>
                  </el-menu-item>

                </el-menu-item-group>
              </el-submenu>
            </el-menu>

            <!--<button v-if="arr.indexOf('user:delete') > -1">删除按钮</button>-->
            <el-menu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-postcard"></i><span class="mutiStyle">考试管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">
                    <router-link to="/question/manage">
                      <span class="fontStyle">试题管理</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="4-2">
                    <router-link to="/question/AllPaper">
                      <span class="fontStyle">试卷总览</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="4-3">
                    <router-link to="/question/createPaper">
                      <span class="fontStyle">创建试卷</span>
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

            <el-menu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-check"></i><span class="mutiStyle">在线考试</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1">
                    <router-link to="/question/paperList">
                      <span class="fontStyle">试卷列表</span>
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="5-2">
                    <router-link to="/paper/userTestList">
                      <span class="fontStyle">考试档案</span>
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

            <el-menu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-upload"></i><span class="mutiStyle">数据采集</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="6-1">
                    <router-link to="/excel">
                      <span class="fontStyle">数据采集</span>
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>

          <el-main>
            <!--主体内容-->
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>


    <el-dialog
        title="便签"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-input
          type="textarea"
          maxlength="200"
          autosize
          show-word-limit
          placeholder="请输入内容"
          v-model="textarea">
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="writeNote">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkNewPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updatePass">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="输入密码"
        :visible.sync="centerDialogVisible3"
        width="30%"
        center>
      <el-input
          placeholder="请输入聊天室密码"
          v-model="pass"
          clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible3 = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<style>

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.main {

}

</style>

<script>
import Player from 'zw-player';

export default {
  name: "Main",
  components: {
    Player
  },
  data() {
    return {
      loginName: "",
      centerDialogVisible: false,
      centerDialogVisible3: false,
      textarea: "",
      dialogVisible: false,
      ruleForm: {
        checkNewPass: "",
        oldPass: "",
        newPass: ""
      }
    }
  },
  created() {
    this.user = sessionStorage.getItem("user");
    this.loginName = sessionStorage.getItem("loginName");
    this.textarea = sessionStorage.getItem("noteContent");
  },
  methods: {
    showChat() {
      //this.centerDialogVisible3 = true;
      //return;
      this.$router.replace("/chat/chatView");
    },
    goHomePage() {
      this.$router.replace("/welcome");
    },
    updatePass() {
      if (this.ruleForm.oldPass == "" || this.ruleForm.oldPass == null) {
        this.$message.error("请输入旧密码!");
        return;
      }
      if (this.ruleForm.newPass == "" || this.ruleForm.newPass == null) {
        this.$message.error("请输入新密码!");
        return;
      }
      if (this.ruleForm.newPass != this.ruleForm.checkNewPass) {
        this.$message.error("两次输入密码不一致!");
        return;
      }
      this.axios.put("/user/updatePass", this.ruleForm).then(resp => {
        if (resp.data.statusCode == 200) {
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          //清空，重新登录
          sessionStorage.clear();
        }
        this.ruleForm = {};
        this.dialogVisible = false;
      })
    },
    writeNote() {
      this.axios.put("/user/writeNote?textarea=" + this.textarea).then(resp => {
        if (resp.data.statusCode == 200) {
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          sessionStorage.setItem("noteContent", this.textarea);
        }
      })
      this.centerDialogVisible = false;
    },
    logout() {
      this.$confirm('确定退出登录吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/user/logout").then(resp => {
          if (resp.data.statusCode == 200) {
            //清空session
            sessionStorage.clear();
            //跳转到登录页
            this.$router.replace("/login")
          }

        })
      })

    }
  }
}
</script>

<style lang="scss" scoped>

.spanBox {
  font-size: 15px;
  font-weight: bold;
  color: #505458;
}

a {
  text-decoration: none;
}

.fontStyle {
  font-weight: bold;
}

.mainStyle {
  color: white;
  font-size: 17px;
  font-weight: bold;
}

.mutiStyle {
  color: darkgreen;
  font-weight: bold;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
}

</style>
